<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="preloader" id="preloader">
      <h1>FRANCISCA MOURA</h1>
      <p>GRAPHIC &amp; INTERACTION DESIGNER</p>
      <div class="progress-container">
        <p id="copyright">©</p>
        <div id="progress">
          <div id="progress1">
            <div class="progress-cont">
              <div class="char">2</div>
              <div class="char">0</div>
              <div class="char">2</div>
              <div class="char">2</div>
            </div>
          </div>
          <div id="progress2">
            <div class="progress-cont">
              <div class="char">2</div>
              <div class="char">0</div>
              <div class="char">2</div>
              <div class="char">2</div>
            </div>
          </div>
        </div>
      </div>
      <div class="preload-data" aria-hidden="true">
        <div
          data-main-preload=""
          data-preload-mobile="https://d16tvu8s9o80e8.cloudfront.net/medium_Harbour_Space_18a9330d05.jpg"
          data-preload-url="https://d16tvu8s9o80e8.cloudfront.net/Harbour_Space_18a9330d05.jpg"
        ></div>
        <div
          data-main-preload=""
          data-preload-mobile="https://d16tvu8s9o80e8.cloudfront.net/medium_Student_App_c966538eaf.jpg"
          data-preload-url="https://d16tvu8s9o80e8.cloudfront.net/Student_App_c966538eaf.jpg"
        ></div>
        <div
          data-main-preload=""
          data-preload-mobile="https://d16tvu8s9o80e8.cloudfront.net/medium_Barkyn_95fb47f9c4.jpg"
          data-preload-url="https://d16tvu8s9o80e8.cloudfront.net/Barkyn_95fb47f9c4.jpg"
        ></div>
        <div
          data-main-preload=""
          data-preload-mobile="https://d16tvu8s9o80e8.cloudfront.net/medium_Humana_b6f0c4b99c.jpg"
          data-preload-url="https://d16tvu8s9o80e8.cloudfront.net/Humana_b6f0c4b99c.jpg"
        ></div>
      </div>
    </div>
    <main>
      <div class="scroll-wrapper" data-scrollable="">
        <div>
          <div class="home-container">
            <div class="home">
              <div class="images-container">
                <div class="image-markers">
                  <div
                    class="image"
                    data-image-index="1"
                    data-role="Lead UI Designer"
                    data-type="Website &amp; Design System"
                    data-year="2021"
                  >
                    <div class="inner">
                      <a
                        tabindex="-1"
                        class="home-image"
                        data-index="1"
                        draggable="false"
                        data-centered="false"
                        ><img
                          alt="Francisca Moura - Harbour.Space"
                          data-src="https://d16tvu8s9o80e8.cloudfront.net/Harbour_Space_18a9330d05.jpg"
                          data-src-small="https://d16tvu8s9o80e8.cloudfront.net/medium_Harbour_Space_18a9330d05.jpg"
                          draggable="false"
                      /></a>
                    </div>
                  </div>
                  <div
                    class="image"
                    data-image-index="2"
                    data-role="Lead UI Designer"
                    data-type="Landing Page"
                    data-year="2021"
                  >
                    <div class="inner">
                      <a
                        tabindex="-1"
                        class="home-image"
                        data-index="2"
                        draggable="false"
                        data-centered="false"
                        ><img
                          alt="Francisca Moura - Student App"
                          data-src="https://d16tvu8s9o80e8.cloudfront.net/Student_App_c966538eaf.jpg"
                          data-src-small="https://d16tvu8s9o80e8.cloudfront.net/medium_Student_App_c966538eaf.jpg"
                          draggable="false"
                      /></a>
                    </div>
                  </div>
                  <div
                    class="image"
                    data-image-index="3"
                    data-role="Designer"
                    data-type="Branding &amp; Print"
                    data-year="2019"
                  >
                    <div class="inner">
                      <a
                        tabindex="-1"
                        class="home-image"
                        data-index="3"
                        draggable="false"
                        data-centered="false"
                        ><img
                          alt="Francisca Moura - Barkyn"
                          data-src="https://d16tvu8s9o80e8.cloudfront.net/Barkyn_95fb47f9c4.jpg"
                          data-src-small="https://d16tvu8s9o80e8.cloudfront.net/medium_Barkyn_95fb47f9c4.jpg"
                          draggable="false"
                      /></a>
                    </div>
                  </div>
                  <div
                    class="image"
                    data-image-index="4"
                    data-role="Art Director &amp; Designer"
                    data-type="Concept &amp; Website"
                    data-year="2020"
                  >
                    <div class="inner">
                      <a
                        tabindex="-1"
                        class="home-image"
                        data-index="4"
                        draggable="false"
                        data-centered="false"
                        ><img
                          alt="Francisca Moura - Humana"
                          data-src="https://d16tvu8s9o80e8.cloudfront.net/Humana_b6f0c4b99c.jpg"
                          data-src-small="https://d16tvu8s9o80e8.cloudfront.net/medium_Humana_b6f0c4b99c.jpg"
                          draggable="false"
                      /></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="titles-container">
                <div class="titles">
                  <div class="title-container">
                    <div class="title" data-number="01" data-title="Harbour">
                      <div class="title-display">
                        <div class="number">01</div>
                        <a tabindex="-1" data-index="1"><h4>Harbour</h4></a>
                      </div>
                    </div>
                    <div class="title" data-number="02" data-title="Student">
                      <div class="title-display">
                        <div class="number">02</div>
                        <a tabindex="-1" data-index="2"><h4>Student</h4></a>
                      </div>
                    </div>
                    <div class="title" data-number="" data-title="">
                      <div class="title-display"></div>
                    </div>
                    <div class="title" data-number="" data-title="">
                      <div class="title-display"></div>
                    </div>
                  </div>
                  <div class="subtitle-container">
                    <div class="title" data-number="" data-title="Space">
                      <div class="title-display">
                        <a tabindex="-1" data-index="1"><h4>Space</h4></a>
                      </div>
                    </div>
                    <div class="title" data-number="" data-title="App">
                      <div class="title-display">
                        <a tabindex="-1" data-index="2"><h4>App</h4></a>
                      </div>
                    </div>
                    <div class="title" data-number="03" data-title="Barkyn">
                      <div class="title-display">
                        <div class="number">03</div>
                        <a tabindex="-1" data-index="3"><h4>Barkyn</h4></a>
                      </div>
                    </div>
                    <div class="title" data-number="04" data-title="Humana">
                      <div class="title-display">
                        <div class="number">04</div>
                        <a tabindex="-1" data-index="4"><h4>Humana</h4></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="infos-container">
                <div class="infos">
                  <div class="info">
                    <p class="h1">Website &amp; Design System</p>
                    <p class="spaced">Lead UI Designer</p>
                    <!-- <p>© 21</p> -->
                  </div>
                  <div class="info">
                    <p class="h1">Landing Page</p>
                    <p class="spaced">Lead UI Designer</p>
                    <!-- <p>© 21</p> -->
                  </div>
                  <div class="info">
                    <p class="h1">Branding &amp; Print</p>
                    <p class="spaced">Designer</p>
                    <!-- <p>© 19</p> -->
                  </div>
                  <div class="info">
                    <p class="h1">Concept &amp; Website</p>
                    <p class="spaced">Art Director &amp; Designer</p>
                    <!-- <p>© 20</p> -->
                  </div>
                </div>
                <div class="years">
                  <div class="years-container">
                    <div class="year-copy">&nbsp;</div>
                    <div class="year-container">
                      <span class="year">©&nbsp;2021</span>
                      <span class="year">©&nbsp;2021</span>
                      <span class="year">©&nbsp;2019</span>
                      <span class="year">©&nbsp;2020</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div id="c-elements">
      <h2>/</h2>
      <h4>/</h4>
    </div>
    <script type="module">
      var browser;
      import app from "./dist/app/index.js";
      app();
    </script>
  </body>
</html>
